<template>
	<view class="inventory">
		<!-- 搜索输入框 -->
		<view class="searchBox">
			<view>
				<uni-search-bar :radius="100" @input="search"></uni-search-bar>
			</view>
			<view class="searchItem">
				<uni-data-select v-model="warehouseName" :localdata="warehouseData" @change="warehouseChange"
					placeholder="请选择仓库"></uni-data-select>
			</view>
		</view>
		<!-- 表格 -->
		<uni-table stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th width="80">仓库名称</uni-th>
				<uni-th width="80">产品编码</uni-th>
				<uni-th width="70">仓储</uni-th>
				<uni-th>商品名称</uni-th>
				<uni-th width="85">商品规格</uni-th>
				<uni-th>盒瓶条形码</uni-th>
				<uni-th>外箱条形码</uni-th>
				<uni-th width="50">数量</uni-th>
				<uni-th width="70" v-if="userType !== '1'">操作</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in tableList" :key="index">
				<uni-td>{{item.warehouseName}}</uni-td>
				<uni-td>{{item.warehouseCode}}</uni-td>
				<uni-td>
					<text class="user" v-for="user in item.warehouseUser" :key="user">
						{{user}}
					</text>
				</uni-td>
				<uni-td>{{item.commodityName}}</uni-td>
				<uni-td>{{item.commoditySpecification}}</uni-td>
				<uni-td>{{item.commodityVaseCode}}</uni-td>
				<uni-td>{{item.commodityCaseCode}}</uni-td>
				<uni-td>{{item.commodityCount}}瓶</uni-td>
				<uni-td v-if="userType !== '1'">
					<uni-tag text="编辑" type="primary" @click="handleEdit(item)"></uni-tag>
				</uni-td>
			</uni-tr>
		</uni-table>
		<view class="pagination">
			<uni-pagination show-icon="true" :total="total" @change="handlePageChange"></uni-pagination>
		</view>
		<view class="buttonWrap" v-if="userType !== '1'">
			<button type="primary" size="mini" @click="handleAdd">新品入库</button>
		</view>
	</view>
</template>

<script>
	import throttle from "../../utils/throttle.js"
	export default {
		name: "inventory",
		data() {
			return {
				tableList: [],
				page: 1,
				total: 0,
				keywords: "",
				warehouseName: "",
				warehouseData: [],
			}
		},
		onShow() {
			// this.getInventory()
			this.getWarehouse()
		},
		onPullDownRefresh() {
			this.page = 1
			this.keywords = ""
			this.getInventory()
			this.getWarehouse()
		},
		methods: {
			/* 获取列表数据 */
			async getInventory() {
				const {
					data
				} = await this.request("getInventory", {
					phone: this.phone,
					page: this.page,
					keywords: this.keywords,
					warehouseName: this.warehouseName,
				})

				this.tableList = data.data
				this.total = data.total
			},
			// 获取仓库与仓库管理员
			async getWarehouse() {
				try {
					const {
						data
					} = await this.request("warehouseCheck", {
						orderId: ""
					})

					// 处理数据格式
					this.warehouseData = data.data.map(item => {
						const obj = {}
						obj.text = item.warehouseName
						obj.value = item.warehouseName
						return obj
					})
				} catch (e) {
					console.log(e)
				}
			},
			search: throttle(async function(value) {
				this.page = 1
				this.keywords = value
				this.getInventory()
			}, 300),
			warehouseChange: throttle(async function(value) {
				this.page = 1
				this.warehouseName = value
				this.getInventory()
			}, 300),
			handleEdit(item) {
				uni.navigateTo({
					url: `/pages/inventory/inventoryEdit?detail=${JSON.stringify(item)}`
				})
			},
			handleAdd() {
				uni.navigateTo({
					url: "/pages/addShop/addShop"
				})
			},
			handleAdds() {},
			handlePageChange(e) {
				this.page = e.current
				this.getInventory()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.inventory {
		padding-bottom: 60rpx;

		.user {
			margin-right: 10rpx;
		}
	}

	.searchBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;

		.searchItem {
			width: 50%;
			text-align: left;
		}
	}
</style>
